<template>
    <!-- 页面级别共用的 -->
    <!-- 试卷列表 -->
    <AppPageTopInfo title="我的学生" subTitle="subTitle">
        <template #btn>
            <button class="btn-create" @click="openDialog">创建学生</button>
        </template>
    </AppPageTopInfo>

    <AppPageContent ref="refPageContent" :opApi="opApi" :cols="3">
        <template v-slot="{ item }">
            <div class="box p-2">
                <div class="">
                    <AppImg :src="item.avatar" style="border-radius: 5px;"></AppImg>
                </div>

                <h5 class="text-center text-lg fw-bold mb-2 mt-4 chover">
                    <router-link :to="'/student-detail?id=' + item.id">
                        {{ item.name }}
                    </router-link>
                </h5>
                <p class=" text-center text-sm">{{ item.telephone }}</p>
                <div class="flex justify-between items-center mt-2 mb-4">
                    <div>
                        {{ 12 }}个门课
                    </div>
                    <button class="btn-enter">查看详情</button>
                </div>

            </div>
        </template>

    </AppPageContent>

    <AppDialogForm @save="save" title="添加学生" ref="refDialog">
        <form action="#">
            <div class="row">
                <div class="col-lg-12">
                    <div class="form-group">
                        <label class="form-control-label">姓名</label>
                        <input type="text" v-model="formData.name" class="form-control" placeholder="请输入学生姓名">
                    </div>
                    <div class="form-group">
                        <label class="form-control-label">手机号</label>
                        <input type="text" v-model="formData.telephone" class="form-control" placeholder="请输入手机号">
                    </div>

                    <div class="form-group">
                        <label class="form-control-label">性别</label>

                        <div>
                            <label class="radio-inline custom_radio me-4">
                                <input type="radio" name="optradio_gender" v-model="formData.gender" value="male">
                                <span class="checkmark"></span> 男
                            </label>
                            <label class="radio-inline custom_radio">
                                <input type="radio" name="optradio_gender" v-model="formData.gender" value="female">
                                <span class="checkmark"></span> 女
                            </label>
                        </div>
                    </div>
                </div>

            </div>
        </form>
    </AppDialogForm>

</template>
<script setup>
import opApi from "@/api/studentApi"
const formData = reactive({
    name: '张小飞1',
    telephone: '13612345678',
    gender: "male"
})
const refPageContent = ref(null)
const refDialog = ref(null)
const openDialog = () => {
    refDialog.value.open()
}
const save = async () => {
    await opApi.add(formData)
    refDialog.value.close()
    refPageContent.value.search()
}
</script>